<template>
  <div class="app" id="app">
    <el-container>
      <el-header height="76px" class="index_top">
        <div class="in_left">
          <img src="@assets/images/home/head_name.png">
        </div>

        <!--导航-->
        <div class="in_name">
          <h1>{{title}}</h1>
        </div>

        <!--登录状态-->
        <div class="in_right">
          <div class="yh_name">
            <img src="@assets/images/home/yh_name.png" />
            <p>{{user.name}}</p>
            <span>{{user.type}}</span>
          </div>
          <p class="in_rigth_xian"></p>
          <div class="yh_tc">
            <a href="#">
              <img class="icon_wxz" src="@assets/images/home/icon_tc.png">
              <img @click="gologin('/login')" class="icon_xz" src="@assets/images/home/icon_tc1.png">
            </a>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside :width="iscollapse ? '65px':'230px'">
          <div class="toggle_menu" @click="toggle_menu"><i :class="iscollapse ? 'el-icon-s-unfold':'el-icon-s-fold'"></i></div>
          <el-menu ref="menuref" class="el-menu-vertical-demo" :collapse="iscollapse" :collapse-transition="false"
            :default-active="activePath" unique-opened router>
            <el-submenu :index="item.id+''" v-for="(item) in menulist" :key="item.id">
              <template slot="title">
                <i :class="item.icon"></i>
                <span :to="item.id">{{item.name}}</span>
              </template>
              <el-menu-item :index="item1.src" :to="item1.src" @click="saceNavstate(item1)" v-for="item1 in item.children"
                :key="item1.id">
                <template slot="title">
                  <span>{{item1.name}}</span>
                </template>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-container>
          <!-- tagsview -->
          <!-- <tagsview></tagsview> -->
          <el-main>
            <!-- tagsview_快捷页面 -->
            <!-- <keep-alive>
              <router-view />
            </keep-alive> -->
            <transition name="fade" mode="out-in">
              <!-- keep-alive_缓存页面 -->
              <keep-alive>
                <router-view />
              </keep-alive>
            </transition>
          </el-main>
          <el-footer height="40px">天气在线公司版权所有</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// import tagsview from '@components/tagsview/tagsview.vue'
import data_list from './modules/data.json'
export default {
  data () {
    return {
      title: '后台管理系统公用',
      user: {
        name: 'admin',
        type: '管理员'
      },
      menulist: [],
      // 是否收起左边菜单
      iscollapse: false,
      activePath: ''
    }
  },
  components: {
    // tagsview: tagsview
  },
  created: function () {
    this.menulist = data_list.menulist
    this.getnav()
    this.activePath = window.localStorage.getItem('activePath')
  },
  methods: {
    // user信息
    getnav: function () {
      this.fullscreenLoading = true
      this.$http.get('')
        .then(res => {
          // console.log(res);
          // this.user.name=res.data
        })
        .catch(error => {
          console.log(error)
        })
    },
    // 坐标菜单切换
    toggle_menu: function () {
      this.iscollapse = !this.iscollapse
    },

    saceNavstate: function (data) {
      console.log(data)
      const src_store = { // eslint-disable-line no-unused-vars
        name: data.name,
        path: data.src,
        meta: {
          title: data.name
        }
      }
      // this.$store.dispatch('addVisitedViews', src_store)
      // window.localStorage.setItem('src_store', JSON.stringify(src_store))
      window.localStorage.setItem('activePath', data.src)
      this.activePath = data.src
    },
    // 退出登录
    gologin: function (src) {
      window.localStorage.clear()
      window.sessionStorage.clear()
      this.$router.push(src)
    }
  }
}
</script>

<style scoped="scoped" lang="scss">
  @import "../../assets/css/nav.css";

  .el-menu-item.is-active {
    background: #5ed2f8;
    color: #fff !important;
  }

  .el-menu--inline {
    background: #fff;
  }

  .el-submenu__title i {
    width: 24px;
    text-align: center;
  }

  .el-menu {
    border-right: 1px solid #f5f5f5;
    background: rgba(155, 223, 251, 0.2);
  }

  .el-menu-vertical-demo {
    height: calc(100% - 35px);
  }

  .el-menu .el-submenu__title span {
    font-size: 16px;
  }

  .toggle_menu {
    width: 100%;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    font-size: 25px;
    color: #434343;
    cursor: pointer;
    box-sizing: border-box;
    border-right: 1px solid #f5f5f5;
  }

  .el-container {
    height: calc(100vh - 76px);
  }

  .el-header {
    padding: 0;
  }

  .el-aside {
    background: #F2F5FF;
  }

  .el-breadcrumb {
    height: 15px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }

  .tags-view-container {
    width: 100%;
    height: 35px;
    background: #fff;
    border-bottom: 1px solid #f5f5f5;
  }

  .el-main {
    background: #fafafa;
    overflow: hidden;
    position: relative;
  }

  .el-footer {
    background: #fff;
    text-align: center;
    line-height: 40px;
    box-sizing: border-box;
    border-top: 1px solid #f5f5f5;
  }

  /* 定义进入和离开时候的过渡状态 */
  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.5s ease;
  }

  /* 定义进入过渡的开始状态 和 离开过渡的结束状态 */
  .fade-enter {
    opacity: 0;
    transform: translateX(-20px);
  }

  .fade-leave-to {
    opacity: 0;
    transform: translateX(100px);
  }
</style>
